<template>
  <div class="noremCon">
    <div class="leftBox">
      <div class="leftBoxBg"></div>
      <div class="left">
        <div class="echartsBox">
          <echarts-global
            class="transformOrigin"
            :option="earningOption"
            @echart_callback="echart_callback"
            :width="300"
            :height="300"
            :style="{
              transform:
                'scaleY(' +
                layoutSettingStore.zoomRatio +
                ')' +
                ' ' +
                'scaleX(' +
                layoutSettingStore.zoomRatioW +
                ')',
            }"
          ></echarts-global>
        </div>

        <div class="echartsBox">
          <echarts-global
            class="transformOrigin"
            :option="earningOption2"
            @echart_callback="echart_callback2"
            :width="300"
            :height="300"
            :style="{
              transform:
                'scaleY(' +
                layoutSettingStore.zoomRatio +
                ')' +
                ' ' +
                'scaleX(' +
                layoutSettingStore.zoomRatioW +
                ')',
            }"
          ></echarts-global>
        </div>
      </div>
    </div>
    <div class="rightBox">
      <div class="rightBoxBg"></div>
      <div class="right">
        <div class="echartsBox">
          <echarts-global
            class="transformOrigin"
            :option="earningOption3"
            @echart_callback="echart_callback3"
            :width="300"
            :height="300"
            :style="{
              transform:
                'scaleY(' +
                layoutSettingStore.zoomRatio +
                ')' +
                ' ' +
                'scaleX(' +
                layoutSettingStore.zoomRatioW +
                ')',
            }"
          ></echarts-global>
        </div>
        <div class="echartsBox">
          <echarts-global
            class="transformOrigin"
            :option="earningOption4"
            @echart_callback="echart_callback4"
            :width="300"
            :height="300"
            :style="{
              transform:
                'scaleY(' +
                layoutSettingStore.zoomRatio +
                ')' +
                ' ' +
                'scaleX(' +
                layoutSettingStore.zoomRatioW +
                ')',
            }"
          ></echarts-global>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import useLayoutSettingStore from '@/store/modules/setting'

let layoutSettingStore = useLayoutSettingStore()

let timer = null as any
let echartHover = ref<boolean>(false)
let timer2 = null as any
let echartHover2 = ref<boolean>(false)
let timer3 = null as any
let echartHover3 = ref<boolean>(false)
let timer4 = null as any
let echartHover4 = ref<boolean>(false)

let earningOption = ref({} as any)
let earningOption2 = ref({} as any)
let earningOption3 = ref({} as any)
let earningOption4 = ref({} as any)

function getOptionData() {
  earningOption.value = {
    title: {
      show: false,
      text: '折线图',
    },
    toolbox: {
      // 工具栏
      show: true,
      orient: 'horizontal', // 工具栏 icon 的布局朝向 horizontal:横向  vertical:纵向
      feature: {
        // 各工具配置项
        saveAsImage: {
          // 保存为图片
          show: true,
          title: '保存为图片',
        },
        restore: {
          show: true,
          title: '还原',
        },
        magicType: {
          // 动态类型切换
          show: true,
          type: ['line', 'bar'],
          title: {
            line: '切换为折线图',
            bar: '切换为柱状图',
          },
        },
      },
    },
    tooltip: {
      // 提示框组件
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'line', // 指示器类型 'line':直线指示器  'shadow':阴影指示器  'none':无指示器  'cross':十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer
      },
    },
    grid: [
      {
        show: false,
        z: 0,
        containLabel: false,
        backgroundColor: 'rgba(0, 0, 0, 0)',
        borderWidth: 1,
        borderColor: '#ccc',
      },
    ],
    xAxis: {
      type: 'category',
      axisTick: {
        show: false, // y轴刻度线，false为隐藏，true为显示
        alignWithLabel: true, // 坐标轴刻度与标签对齐
      },
      axisLine: {
        //y轴坐标轴，false为隐藏，true为显示
        show: false,
      },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false, // y轴刻度线，false为隐藏，true为显示
        alignWithLabel: true, // 坐标轴刻度与标签对齐
      },
      axisLine: {
        //y轴坐标轴，false为隐藏，true为显示
        show: false,
      },
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
      },
      {
        data: [120, 200, 280, 14, 45, 72, 48],
        type: 'line',
      },
    ],
  }
}
getOptionData()

function getOptionData2() {
  earningOption2.value = {
    title: {
      show: true,
      text: '柱状图',
    },
    toolbox: {
      // 工具栏
      show: true,
      orient: 'horizontal', // 工具栏 icon 的布局朝向 horizontal:横向  vertical:纵向
      feature: {
        // 各工具配置项
        saveAsImage: {
          // 保存为图片
          show: true,
          title: '保存为图片',
        },
        restore: {
          show: true,
          title: '还原',
        },
        magicType: {
          // 动态类型切换
          show: true,
          type: ['line', 'bar'],
          title: {
            line: '切换为折线图',
            bar: '切换为柱状图',
          },
        },
      },
    },
    tooltip: {
      // 提示框组件
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow', // 指示器类型 'line':直线指示器  'shadow':阴影指示器  'none':无指示器  'cross':十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer
      },
    },

    legend: {
      top: 50,
      right: 0,
      orient: 'vertical', // horizontal:横向  vertical:纵向
      data: [
        {
          name: 'one',
          // 强制设置图形为圆。
          icon: 'circle',
          // 设置文本为红色
          textStyle: {
            color: 'blue',
          },
        },
        {
          name: 'two',
          // 强制设置图形为圆。
          icon: 'circle',
          // 设置文本为红色
          textStyle: {
            color: 'green',
          },
        },
      ],
    },
    grid: [
      {
        // 网格
        show: true,
        right: '20%',
        borderColor: 'transparent',
      },
    ],
    xAxis: {
      type: 'category',
      axisTick: {
        show: false, // y轴刻度线，false为隐藏，true为显示
        alignWithLabel: true, // 坐标轴刻度与标签对齐
      },
      axisLine: {
        //y轴坐标轴，false为隐藏，true为显示
        show: false,
      },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false, // y轴刻度线，false为隐藏，true为显示
        alignWithLabel: true, // 坐标轴刻度与标签对齐
      },
      axisLine: {
        //y轴坐标轴，false为隐藏，true为显示
        show: false,
      },
    },
    series: [
      {
        name: 'one',
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
      },
      {
        name: 'two',
        data: [100, 180, 130, 60, 90, 130, 150],
        type: 'bar',
      },
    ],
  }
}
getOptionData2()

function getOptionData3() {
  earningOption3.value = {
    title: {
      show: false,
      text: '横向柱状图',
    },
    grid: [
      {
        // 网格
        show: true,
        left: '12%',
        right: '30%',
        borderColor: 'transparent',
      },
    ],
    toolbox: {
      // 工具栏
      show: true,
      orient: 'horizontal', // 工具栏 icon 的布局朝向 horizontal:横向  vertical:纵向
      feature: {
        // 各工具配置项
        saveAsImage: {
          // 保存为图片
          show: true,
          title: '保存为图片',
        },
        restore: {
          show: true,
          title: '还原',
        },
        magicType: {
          // 动态类型切换
          show: true,
          type: ['line', 'bar'],
          title: {
            line: '切换为折线图',
            bar: '切换为柱状图',
          },
        },
      },
    },
    tooltip: {
      // 提示框组件
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow', // 指示器类型 'line':直线指示器  'shadow':阴影指示器  'none':无指示器  'cross':十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer
      },
    },
    xAxis: {
      type: 'value',
      show: false, // 是否显示x轴
      axisTick: {
        show: false, // y轴刻度线，false为隐藏，true为显示
        alignWithLabel: true, // 坐标轴刻度与标签对齐
      },
      axisLine: {
        //y轴坐标轴，false为隐藏，true为显示
        show: false,
      },
    },
    yAxis: [
      {
        type: 'category',
        position: 'left', // 左边y轴坐标轴
        show: true, // 左边y轴坐标轴, false为隐藏，true为显示
        axisTick: {
          show: false, // y轴刻度线，false为隐藏，true为显示
          alignWithLabel: true, // 坐标轴刻度与标签对齐
        },
        axisLine: {
          //y轴坐标轴，false为隐藏，true为显示
          show: false,
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      {
        type: 'category',
        show: true, // 右边y轴坐标轴, false为隐藏，true为显示
        position: 'right', // 右边y轴坐标轴
        axisTick: {
          show: false, // y轴刻度线，false为隐藏，true为显示
          alignWithLabel: true, // 坐标轴刻度与标签对齐
        },
        axisLine: {
          //y轴坐标轴，false为隐藏，true为显示
          show: false,
        },
        data: ['120', '200', '150', '80', '70', '110', '130'],
        axisLabel: {
          show: true, // 是否显示刻度标签
          formatter: (value: any, index: any) => {
            // 自定义刻度标签
            console.log('自定义刻度标签', value, index)
            return `{a|${value}}`
          },
          rich: {
            // 自定义刻度标签样式
            a: {
              backgroundColor: 'rgba(244,0,8,0.1)',
              padding: [5, 0],
              width: 80,
              color: 'rgba(244,0,8,1)',
              borderColor: 'rgba(244,0,8,1)',
              borderWidth: 1,
              align: 'center', // 文字居中显示
            },
          },
        },
      },
    ],
    series: [
      {
        data: [
          {
            value: '1200.00', // 柱子数值
            itemStyle: {
              color: '#a90000', // 柱状图柱子颜色
            },
          },
          {
            value: '900.00',
            itemStyle: {
              color: '#c23531',
            },
          },
          {
            value: '1200.00',
            itemStyle: {
              color: '#2f4554',
            },
          },
          {
            value: '945.00',
            itemStyle: {
              color: '#a90000',
            },
          },
          {
            value: '1200.00',
            itemStyle: {
              color: '#c23531',
            },
          },
          {
            value: '500.00',
            itemStyle: {
              color: '#2f4554',
            },
          },
          {
            value: '134.00',
            itemStyle: {
              color: '#a90000',
            },
          },
        ],
        type: 'bar',
        itemStyle: {
          borderRadius: [0, 50, 50, 0], // 圆角
        },
        showBackground: true, // 显示背景
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)', // 柱子背景颜色
          borderRadius: [0, 50, 50, 0], // 背景圆角
        },
      },
    ],
  }
}
getOptionData3()

function getOptionData4() {
  earningOption4.value = {
    title: {
      show: false,
      text: 'Weather Statistics',
      subtext: 'Fake Data',
      left: 'left',
    },
    toolbox: {
      // 工具栏
      show: true,
      orient: 'horizontal', // 工具栏 icon 的布局朝向 horizontal:横向  vertical:纵向
      feature: {
        // 各工具配置项
        saveAsImage: {
          // 保存为图片
          show: true,
          title: '保存为图片',
        },
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
      bottom: 0,
      left: 'center',
      data: [
        'CityA',
        'CityB',
        'CityC',
        'CityD',
        'CityE',
        'CityF',
        'CityG',
        'CityH',
      ],
    },
    series: [
      {
        name: 'Weather Statistics',
        type: 'pie',
        radius: ['30%', '50%'], // 两个元素的数组是环，单纯一个数是饼
        center: ['50%', '50%'],
        selectedMode: 'single',
        data: [
          { value: 735, name: 'CityA' },
          { value: 510, name: 'CityB' },
          { value: 434, name: 'CityC' },
          { value: 335, name: 'CityD' },
          { value: 735, name: 'CityE' },
          { value: 510, name: 'CityF' },
          { value: 434, name: 'CityG' },
          { value: 335, name: 'CityH' },
        ],
        emphasis: {
          // 高亮状态的扇区和标签样式
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
}
getOptionData4()

// tooltip依次高亮显示
function echart_callback(equipmentPie) {
  var currentIndex = -1
  if (timer) {
    clearInterval(timer)
  }

  equipmentPie.getZr().on('mousemove', (params) => {
    echartHover.value = true
    const pointInPixel = [params.offsetX, params.offsetY]
    if (equipmentPie.containPixel('grid', pointInPixel)) {
      let xIndex = equipmentPie.convertFromPixel({ seriesIndex: 0 }, [
        params.offsetX,
        params.offsetY,
      ])[0]
      currentIndex = xIndex
    }
  })

  equipmentPie.getZr().on('mouseout', (params) => {
    console.log('params', params)
    echartHover.value = false
  })

  timer = setInterval(() => {
    if (echartHover.value) {
      return
    }
    var dataLen = earningOption.value.series[0].data.length

    // 取消之前高亮的图形
    equipmentPie.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: currentIndex,
    })
    currentIndex = (currentIndex + 1) % dataLen
    // 高亮当前图形
    equipmentPie.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: currentIndex,
    })
    // 显示 tooltip
    equipmentPie.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: currentIndex,
    })
    // option.value.series[0].data[currentIndex].selected= true;
    // if (option.series[0].data[currentIndex].children) {
    //   $store.state.childData =
    //       option.series[0].data[currentIndex].children; //存vuex
    // }
  }, 2000)

  equipmentPie.on('click', (param) => {
    let xIndex = param.dataIndex
    equipmentPie.dispatchAction({
      type: 'highlight',
      dataIndex: param.dataIndex,
    }) //激活点击区域高亮
    if (param.dataIndex !== currentIndex) {
      // 当鼠标点击的时候 消除上一个扇区的高亮
      equipmentPie.dispatchAction({
        type: 'downplay',
        dataIndex: currentIndex,
      })
    }
    currentIndex = param.dataIndex //接住当前扇区的dataIndex
    // if (option.series[0].data[currentIndex].children) {
    //   $store.state.childData =
    //       option.series[0].data[currentIndex].children; //存vuex
    // }
  })
}

function echart_callback2(equipmentPie) {
  var currentIndex = -1
  if (timer2) {
    clearInterval(timer2)
  }

  equipmentPie.getZr().on('mousemove', (params) => {
    echartHover2.value = true
    const pointInPixel = [params.offsetX, params.offsetY]
    if (equipmentPie.containPixel('grid', pointInPixel)) {
      let xIndex = equipmentPie.convertFromPixel({ seriesIndex: 0 }, [
        params.offsetX,
        params.offsetY,
      ])[0]
      currentIndex = xIndex
    }
  })

  equipmentPie.getZr().on('mouseout', (params) => {
    console.log('params', params)
    echartHover2.value = false
  })

  timer2 = setInterval(() => {
    if (echartHover2.value) {
      return
    }
    var dataLen = earningOption2.value.series[0].data.length

    // 取消之前高亮的图形
    equipmentPie.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: currentIndex,
    })
    currentIndex = (currentIndex + 1) % dataLen
    // 高亮当前图形
    equipmentPie.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: currentIndex,
    })
    // 显示 tooltip
    equipmentPie.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: currentIndex,
    })
    // option.value.series[0].data[currentIndex].selected= true;
    // if (option.series[0].data[currentIndex].children) {
    //   $store.state.childData =
    //       option.series[0].data[currentIndex].children; //存vuex
    // }
  }, 2000)

  equipmentPie.on('click', (param) => {
    let xIndex = param.dataIndex
    equipmentPie.dispatchAction({
      type: 'highlight',
      dataIndex: param.dataIndex,
    }) //激活点击区域高亮
    if (param.dataIndex !== currentIndex) {
      // 当鼠标点击的时候 消除上一个扇区的高亮
      equipmentPie.dispatchAction({
        type: 'downplay',
        dataIndex: currentIndex,
      })
    }
    currentIndex = param.dataIndex //接住当前扇区的dataIndex
    // if (option.series[0].data[currentIndex].children) {
    //   $store.state.childData =
    //       option.series[0].data[currentIndex].children; //存vuex
    // }
  })
}

function echart_callback3(equipmentPie) {
  var currentIndex = -1
  if (timer3) {
    clearInterval(timer3)
  }

  equipmentPie.getZr().on('mousemove', (params) => {
    echartHover3.value = true
    const pointInPixel = [params.offsetX, params.offsetY]
    if (equipmentPie.containPixel('grid', pointInPixel)) {
      let xIndex = equipmentPie.convertFromPixel({ seriesIndex: 0 }, [
        params.offsetX,
        params.offsetY,
      ])[0]
      currentIndex = xIndex
    }
  })

  equipmentPie.getZr().on('mouseout', (params) => {
    console.log('params', params)
    echartHover3.value = false
  })

  timer3 = setInterval(() => {
    if (echartHover3.value) {
      return
    }
    var dataLen = earningOption2.value.series[0].data.length

    // 取消之前高亮的图形
    equipmentPie.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: currentIndex,
    })
    currentIndex = (currentIndex + 1) % dataLen
    // 高亮当前图形
    equipmentPie.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: currentIndex,
    })
    // 显示 tooltip
    equipmentPie.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: currentIndex,
    })
    // option.value.series[0].data[currentIndex].selected= true;
    // if (option.series[0].data[currentIndex].children) {
    //   $store.state.childData =
    //       option.series[0].data[currentIndex].children; //存vuex
    // }
  }, 2000)

  equipmentPie.on('click', (param) => {
    let xIndex = param.dataIndex
    equipmentPie.dispatchAction({
      type: 'highlight',
      dataIndex: param.dataIndex,
    }) //激活点击区域高亮
    if (param.dataIndex !== currentIndex) {
      // 当鼠标点击的时候 消除上一个扇区的高亮
      equipmentPie.dispatchAction({
        type: 'downplay',
        dataIndex: currentIndex,
      })
    }
    currentIndex = param.dataIndex //接住当前扇区的dataIndex
    // if (option.series[0].data[currentIndex].children) {
    //   $store.state.childData =
    //       option.series[0].data[currentIndex].children; //存vuex
    // }
  })
}

function echart_callback4(equipmentPie) {
  var currentIndex = -1
  if (timer4) {
    clearInterval(timer4)
  }

  equipmentPie.getZr().on('mousemove', (params) => {
    echartHover4.value = true
    const pointInPixel = [params.offsetX, params.offsetY]
    if (equipmentPie.containPixel('grid', pointInPixel)) {
      let xIndex = equipmentPie.convertFromPixel({ seriesIndex: 0 }, [
        params.offsetX,
        params.offsetY,
      ])[0]
      currentIndex = xIndex
    }
  })

  equipmentPie.getZr().on('mouseout', (params) => {
    console.log('params', params)
    echartHover4.value = false
  })

  timer4 = setInterval(() => {
    if (echartHover4.value) {
      return
    }
    var dataLen = earningOption2.value.series[0].data.length

    // 取消之前高亮的图形
    equipmentPie.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: currentIndex,
    })
    currentIndex = (currentIndex + 1) % dataLen
    // 高亮当前图形
    equipmentPie.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: currentIndex,
    })
    // 显示 tooltip
    equipmentPie.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: currentIndex,
    })
    // option.value.series[0].data[currentIndex].selected= true;
    // if (option.series[0].data[currentIndex].children) {
    //   $store.state.childData =
    //       option.series[0].data[currentIndex].children; //存vuex
    // }
  }, 2000)

  equipmentPie.on('click', (param) => {
    let xIndex = param.dataIndex
    equipmentPie.dispatchAction({
      type: 'highlight',
      dataIndex: param.dataIndex,
    }) //激活点击区域高亮
    if (param.dataIndex !== currentIndex) {
      // 当鼠标点击的时候 消除上一个扇区的高亮
      equipmentPie.dispatchAction({
        type: 'downplay',
        dataIndex: currentIndex,
      })
    }
    currentIndex = param.dataIndex //接住当前扇区的dataIndex
    // if (option.series[0].data[currentIndex].children) {
    //   $store.state.childData =
    //       option.series[0].data[currentIndex].children; //存vuex
    // }
  })
}
</script>

<style scoped lang="scss">
.noremCon {
  width: 100%;
  height: 100vh;

  .transformOrigin {
    transform-origin: 0 0;
  }

  /*
  包裹echarts组件，设置宽高解决留白问题。
  */
  .echartsBox {
    width: getVw(300px);
    height: getVh(260px);
  }

  .leftBox {
    width: getVw(300px);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;

    .leftBoxBg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(getVw(10px));
    }

    .left {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 2;
    }
  }

  .rightBox {
    width: getVw(300px);
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2;

    .rightBoxBg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(getVw(10px));
    }

    .right {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 2;
    }
  }
}
</style>
